<template>
  <view class="profile-container" @tap="navigateToEdit">
    <!-- 基本信息区块 -->
    <view class="profile-section" v-if="Object.keys(profileData).length > 0 || contactDetail.nickname">
      <!-- 将昵称改为平铺形式 -->
      <view class="section-item" v-if="contactDetail.nickname">
        <view class="item-label">昵称</view>
        <view class="item-value">
          <text>{{ contactDetail.nickname }}</text>
        </view>
      </view>
      <!-- 如果有昵称和其他信息，添加分隔线 -->
      <view class="divider" v-if="contactDetail.nickname && Object.keys(profileData).length > 0"></view>
      
      <view v-for="(value, key, index) in profileData" :key="key">
        <view class="section-item">
          <view class="item-label">{{ key }}</view>
          <view class="item-value">
            <text v-if="key === '生日'" class="birthday-value">{{ value }}</text>
            <text v-else-if="key != '与我的关系'">{{ value }}</text>
            <text v-if="key === '生日'" class="age-tag">{{ calculateAge(value) }}岁</text>
            <view v-if="key === '与我的关系'" class="relation-tags">
              <view class="relation-tag tag-blue">{{ value }}</view>
            </view>
          </view>
        </view>
        <view class="divider" v-if="index < Object.keys(profileData).length - 1"></view>
      </view>
    </view>

    <!-- 联系方式区块 -->
    <view class="profile-section" v-if="phoneNumbers.length > 0">
      <view class="section-title">
        <uni-icons type="phone" size="18" color="#4CAF50"></uni-icons>
        <text>联系方式</text>
      </view>
      <view class="section-item" v-for="(item, index) in phoneNumbers" :key="index">
        <view class="item-value phone-number left-align">{{ item }}</view>
      </view>
    </view>

    <!-- 爱好和讨厌区块 -->
    <view class="profile-section" v-if="(hobbies && hobbies.length > 0) || (dislikes && dislikes.length > 0)">
      <!-- 爱好部分 -->
      <view v-if="hobbies && hobbies.length > 0">
        <view class="section-title">
          <uni-icons type="heart" size="18" color="#F44336"></uni-icons>
          <text>爱好</text>
        </view>
        <view class="tags-container">
          <view 
            class="tag-item" 
            v-for="(hobby, index) in hobbies" 
            :key="index"
            :style="{ backgroundColor: hobby.color || '#FF6B6B' }"
          >
            {{ hobby.tagName || hobby }}
          </view>
        </view>
      </view>
      
      <!-- 分割线 -->
      <view class="divider" v-if="hobbies.length > 0 && dislikes.length > 0"></view>
      
      <!-- 讨厌部分 -->
      <view v-if="dislikes && dislikes.length > 0">
        <view class="section-title">
          <uni-icons type="closeempty" size="18" color="#FF9800"></uni-icons>
          <text>讨厌</text>
        </view>
        <view class="tags-container">
          <view 
            class="tag-item" 
            v-for="(dislike, index) in dislikes" 
            :key="index"
            :style="{ backgroundColor: dislike.color || '#FF5252' }"
          >
            {{ dislike.tagName || dislike }}
          </view>
        </view>
      </view>
    </view>

    <!-- 口味区块 -->
    <view class="profile-section" v-if="tastes && tastes.length > 0">
      <view class="section-title">
        <uni-icons type="shop-filled" size="18" color="#FF5722"></uni-icons>
        <text>口味</text>
      </view>
      <view class="tags-container">
        <view 
          class="tag-item" 
          v-for="(taste, index) in tastes" 
          :key="index"
          :style="{ backgroundColor: taste.color || '#FF9800' }"
        >
          {{ taste.tagName || taste }}
        </view>
      </view>
    </view>

    <!-- 习惯区块 -->
    <view class="profile-section" v-if="habits && habits.length > 0">
      <view class="section-title">
        <uni-icons type="calendar" size="18" color="#3F51B5"></uni-icons>
        <text>习惯</text>
      </view>
      <view class="tags-container">
        <view 
          class="tag-item" 
          v-for="(habit, index) in habits" 
          :key="index"
          :style="{ backgroundColor: habit.color || '#9C27B0' }"
        >
          {{ habit.tagName || habit }}
        </view>
      </view>
    </view>

    <!-- 技能区块 -->
    <view class="profile-section" v-if="skills && skills.length > 0">
      <view class="section-title">
        <uni-icons type="star" size="18" color="#9C27B0"></uni-icons>
        <text>技能</text>
      </view>
      <view class="tags-container">
        <view 
          class="tag-item" 
          v-for="(skill, index) in skills" 
          :key="index"
          :style="{ backgroundColor: skill.color || '#4CAF50' }"
        >
          {{ skill.tagName || skill }}
        </view>
      </view>
    </view>

    <!-- 邮箱区块 -->
    <view class="profile-section" v-if="contactDetail.email">
      <view class="section-title">
        <uni-icons type="email" size="18" color="#00BCD4"></uni-icons>
        <text>邮箱</text>
      </view>
      <view class="section-item">
        <view class="item-value left-align email">{{ contactDetail.email }}</view>
      </view>
    </view>

    <!-- 学校区块 -->
    <view class="profile-section" v-if="contactDetail.school">
      <view class="section-title">
        <uni-icons type="flag" size="18" color="#2196F3"></uni-icons>
        <text>学校</text>
      </view>
      <view class="section-item">
        <view class="item-value left-align">{{ contactDetail.school }}</view>
      </view>
    </view>

    <!-- 职业区块 -->
    <view class="profile-section" v-if="contactDetail.work">
      <view class="section-title">
        <uni-icons type="staff" size="18" color="#607D8B"></uni-icons>
        <text>职业</text>
      </view>
      <view class="section-item">
        <view class="item-value left-align">{{ contactDetail.work }}</view>
      </view>
    </view>

    <!-- 公司区块 -->
    <view class="profile-section" v-if="contactDetail.companyName">
      <view class="section-title">
        <uni-icons type="shop" size="18" color="#795548"></uni-icons>
        <text>公司</text>
      </view>
      <view class="section-item">
        <view class="item-value left-align">{{ contactDetail.companyName }}</view>
      </view>
    </view>

    <!-- 居住地址区块 -->
    <view class="profile-section" v-if="addresses.length > 0">
      <view class="section-title">
        <uni-icons type="location" size="18" color="#E91E63"></uni-icons>
        <text>居住地址</text>
      </view>
      <view class="section-item" v-for="(address, index) in addresses" :key="index">
        <view class="item-value left-align">{{ address }}</view>
      </view>
    </view>

    <!-- 备注区块 -->
    <view class="profile-section" v-if="contactDetail.remark">
      <view class="section-title">
        <uni-icons type="compose" size="18" color="#009688"></uni-icons>
        <text>备注</text>
      </view>
      <view class="section-item">
        <view class="item-value left-align">{{ contactDetail.remark }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { onShow } from '@dcloudio/uni-app';

const props = defineProps({
  profileData: {
    type: Object,
    default: () => ({})
  },
  hobbies: {
    type: Array,
    default: () => []
  },
  dislikes: {
    type: Array,
    default: () => []
  },
  skills: {
    type: Array,
    default: () => []
  },
  tastes: {
    type: Array,
    default: () => []
  },
  habits: {
    type: Array,
    default: () => []
  },
  contactDetail: {
    type: Object,
    default: () => ({})
  },
  contactId: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['refresh']);

// 添加跳转到编辑页面的方法
const navigateToEdit = () => {
  if (props.contactDetail && props.contactDetail.id) {
    uni.navigateTo({
      url: `/pages/contact/edit?id=${props.contactDetail.id}`
    });
  }
};

// 修改 onShow 生命周期钩子
onShow(() => {
  // 每次显示组件时都刷新数据
  if (props.contactId) {
    emit('refresh');
  }
});

// 可以添加一些计算属性来处理联系人详情数据
const phoneNumbers = computed(() => {
  const numbers = [];
  if (props.contactDetail.phoneNumber) numbers.push(props.contactDetail.phoneNumber);
  if (props.contactDetail.phoneNumber2) numbers.push(props.contactDetail.phoneNumber2);
  return numbers;
});

const addresses = computed(() => {
  const addrList = [];
  if (props.contactDetail.homeAddress) addrList.push(props.contactDetail.homeAddress);
  if (props.contactDetail.mailingAddress && props.contactDetail.mailingAddress !== props.contactDetail.homeAddress) {
    addrList.push(props.contactDetail.mailingAddress);
  }
  return addrList;
});

// 计算年龄
const calculateAge = (birthdate) => {
  if (!birthdate) return '';
  
  const birth = new Date(birthdate);
  const now = new Date();
  let age = now.getFullYear() - birth.getFullYear();
  
  // 如果今年的生日还没过，年龄减1
  if (now.getMonth() < birth.getMonth() || 
      (now.getMonth() === birth.getMonth() && now.getDate() < birth.getDate())) {
    age--;
  }
  
  return age;
};
</script>

<style lang="scss" scoped>
.profile-container {
  padding: 20rpx 0;
  background-color: #f5f5f5;
  min-height: 100%;
}

.profile-section {
  margin: 0 20rpx 20rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx 30rpx;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
  
  &:active {
    background-color: #f5f5f5;
  }
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  margin-top: 16rpx;
  
  text {
    margin-left: 8rpx;
  }
}

.section-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.divider {
  height: 1px;
  background-color: #f0f0f0;
  margin: 16rpx 0;
}

.item-label {
  font-size: 14px;
  color: #666;
  flex-shrink: 0;
}

.item-value {
  font-size: 14px;
  color: #333;
  text-align: right;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.left-align {
  justify-content: flex-start;
  text-align: left;
}

.birthday-value {
  margin-right: 16rpx;
}

.age-tag {
  background-color: #E3F2FD;
  color: #2196F3;
  font-size: 12px;
  padding: 2rpx 12rpx;
  border-radius: 20rpx;
}

.relation-tags {
  display: flex;
  gap: 10rpx;
}

.relation-tag {
  font-size: 12px;
  padding: 2rpx 12rpx;
  border-radius: 20rpx;
}

.tag-blue {
  background-color: #E3F2FD;
  color: #2196F3;
}

.tag-green {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.phone-number {
  color: #2196F3;
  text-decoration: underline;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.tag-item {
  font-size: 12px;
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  color: #fff; /* 默认白色文字 */
  font-weight: 500; /* 稍微加粗以提高可读性 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 添加文字阴影提高对比度 */
}

.tag-pink {
  background-color: #FCE4EC;
  color: #E91E63;
}

.tag-orange {
  background-color: #FFF3E0;
  color: #FF9800;
}

.tag-red {
  background-color: #FFEBEE;
  color: #FF5722;
}

.tag-purple {
  background-color: #E8EAF6;
  color: #3F51B5;
}

.email {
  color: #00BCD4;
  text-decoration: underline;
}
</style>